<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>优秀作品</title>

    <!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
    <link href="css/works.css" type="text/css" rel="stylesheet"/>

    <script src="js/jquery-1.9.0.min.js"></script>
    <script src="js/photo_wall.js"></script>
</head>

<body>
<div class="header">
    <div class="head_content">
        <div class="head_logo">
            <img src="img/logo_03.png">
        </div>
        <!--导航栏-->
        <nav class="head_navbar">
            <ul id="main">
                <li><a href="home.html">首页</a></li>
                <li>
                    <a>社团</a>
                    <ul class="drop">
                        <div>
                            <li><a href="cj.html">程序设计基础协会</a></li>
                            <li><a href="acm.html">ACM协会</a></li>
                            <li><a href="bgs.html">不甘社</a></li>
                            <li><a href="wkf.html">微开发</a></li>
                        </div>
                    </ul>

                </li>
                <li><a href="works.html">作品</a></li>
                <li><a href="news.html">新闻</a></li>
                <li><a href="about.html">关于我们</a></li>
                <div id="marker"></div>
            </ul>
        </nav>
    </div>
</div>
<!-- ---------------------------------------------------main---------------------- -->

<div class="container">
    <div class="wrap">
        <div class="tile">
            <img src="img/works_01.jpg"/>
            <a href="works_detail.html">
                <div class="text">
                    <h1>微信点到</h1>
                    <h2 class="animate-text">老师点名的神器</h2>
                    <p class="animate-text"> 通过这个东西，老师不需要在课上花时间点名啦 </p>
                    <div class="dots">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </a>
        </div>


        <div class="tile">
            <img src="img/works_02.png"/>
            <a href="works_detail.html">
                <div class="text">
                    <h1>扫码寻物</h1>
                    <h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
                    <p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork
                        chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
                    <div class="dots">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </a>
        </div>

        <div class="tile">
            <img src="img/Icpc_logo.png"/>
            <a href="works_detail.html">
                <div class="text">
                    <h1 style="color: #fff;">Online Judge系统</h1>
                    <h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
                    <p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork
                        chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
                    <div class="dots">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </a>
        </div>


    </div>

    <div class="wrap">
        <div class="tile">
            <img src="img/temp_01.jpg"/>
            <a href="works_detail.html">
                <div class="text">
                    <h1>Lorem ipsum.</h1>
                    <h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
                    <p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork
                        chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
                    <div class="dots">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </a>
        </div>


        <div class="tile">
            <img src="img/temp_02.jpg"/>
            <a href="works_detail.html">
                <div class="text">
                    <h1>Lorem ipsum.</h1>
                    <h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
                    <p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork
                        chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
                    <div class="dots">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </a>
        </div>

        <div class="tile">
            <img src="img/temp_03.jpg"/>
            <a href="works_detail.html">
                <div class="text">
                    <h1>Lorem ipsum.</h1>
                    <h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
                    <p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork
                        chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
                    <div class="dots">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </a>
        </div>


    </div>
</div>
</div>

<div class="foot">

    <div class="bottom">
        <div class="bottom_content">
            <div class="left">
                <div><img src="img/logo_without_text.png"></div>
                <p>版权所有：北京理工大学珠海学院计算机科技协会</p>
            </div>
            <div class="right">
                <div class="qr_code_box">
                    <div><img src="img/qq_qt_code.jpg"></div>
                    <p>2016级程序程基协会qq群</p>
                </div>
                <div class="qr_code_box">
                    <div><img src="img/wechat_qt_code.jpg"></div>
                    <p>计算机科技协会服务号</p>
                </div>
            </div>
        </div>
    </div>

</div>

</body>

</html>
